<template>
    <div>
        <jsscom-heard />
        <div class="cons">
            <div class="con-1">
                <el-carousel height="570px" indicator-position="none">
                    <el-carousel-item v-for="(item, index) in 1" :key="index">
                        <router-link to>
                            <img src="../../../assets/news/1.png" alt />
                        </router-link>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="con-2">
                <div class="pu-con">
                    <div class="con-tilte">
                        <p>NEWS BULLETIN</p>
                        <h1>新闻公告</h1>
                    </div>
                    <div class="con2-c">
                        <div class="con21">
                            <el-carousel
                                height="370px"
                                indicator-position="none"
                            >
                                <el-carousel-item
                                    v-for="(item, index) in newsList.slice(
                                        0,
                                        3
                                    )"
                                    :key="index"
                                >
                                    <router-link
                                        :to="{
                                            path: '/jsgg/dec',
                                            query: { id: item.id },
                                        }"
                                    >
                                        <img
                                            :src="
                                                prefixUrl + item.coverImageUrl
                                            "
                                            alt
                                        />
                                        <p v-text="item.title"></p>
                                    </router-link>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="con22">
                            <span class="con22-title">
                                <p
                                    v-for="(item, index) in newsNavs.slice(
                                        0,
                                        4
                                    )"
                                    :key="index"
                                    @click="onNewsTab(item, index)"
                                    :class="{ 'news-on': newsIndex == index }"
                                >
                                    {{ item.title }}
                                </p>
                            </span>
                            <div class="con22-news">
                                <router-link
                                    v-for="(item, index) in newsList.slice(
                                        3,
                                        4
                                    )"
                                    :key="index"
                                    :to="{
                                        path: '/jsgg/dec',
                                        query: { id: item.id, type: type },
                                    }"
                                    v-text="item.title"
                                ></router-link>
                                <div>
                                    <router-link
                                        v-for="(item, index) in newsList.slice(
                                            4
                                        )"
                                        :key="index"
                                        :to="{
                                            path: '/jsgg/dec',
                                            query: { id: item.id },
                                        }"
                                    >
                                        <p v-text="item.title"></p>
                                        <p v-if="newsIndex == 2">
                                            {{ item.createTime | pattime }}
                                        </p>
                                        <p v-else>
                                            {{ item.createDate | pattime1 }}
                                        </p>
                                    </router-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="con-3">
                <div class="pu-con">
                    <div class="con-tilte">
                        <p>EVENT DECLARATION</p>
                        <h1>赛事申报</h1>
                    </div>
                    <div class="con3-c">
                        <router-link
                            v-for="(item, index) in sssbList.slice(0, 4)"
                            :key="index"
                            :to="{
                                path: '/jiangxiang',
                                query: { type: index },
                            }"
                        >
                            <img
                                v-if="index == 0"
                                src="../../../assets/news/n-1.jpg"
                                alt=""
                            />
                            <img
                                v-if="index == 1"
                                src="../../../assets/news/n-2.jpg"
                                alt=""
                            />
                            <img
                                v-if="index == 2"
                                src="../../../assets/news/n-3.jpg"
                                alt=""
                            />
                            <img
                                v-if="index == 3"
                                src="../../../assets/news/n-4.jpg"
                                alt=""
                            />
                            <p></p>
                            <span>
                                <p>view more</p>
                                <p></p>
                                <p></p>
                            </span>
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="con-3" style="margin-top:0">
                <div class="pu-con">
                    <div class="con-tilte">
                        <p>WOEKS SHOW</p>
                        <h1>作品展示</h1>
                    </div>
                    <div class="con3-c" style="    padding-bottom: 0px;">
                        <router-link
                            v-for="(item, index) in zuopvideoList"
                            :key="index"
                            :to="{ path: '/video/dec', query: { id: item.id } }"
                        >
                            <img :src="prefixUrl + item.coverImageUrl" alt="" />
                        </router-link>
                    </div>
                    <div class="con3-c" style="    padding-bottom: 30px;">
                        <p
                            v-for="(item, index) in zuopvideoList"
                            :key="index"
                            style="display: block;color: #000;font-size: 16px;padding-top: 16px;"
                        >
                            {{ item.title }}
                        </p>
                    </div>
                    <div class="con4-c">
                        <div class="con42">
                            <el-carousel
                                height="230px"
                                indicator-position="none"
                                @change="onHuiyuan"
                            >
                                <el-carousel-item
                                    v-for="(item, index) in zuopmembeLength"
                                    :key="index"
                                >
                                    <div style="display:flex">
                                        <router-link
                                            :to="{
                                                path: '/video/dec',
                                                query: { id: item1.id },
                                            }"
                                            v-for="(item1,
                                            index1) in zuopvideoImgList.slice(
                                                index * 5,
                                                (index + 1) * 5
                                            )"
                                            :key="index1"
                                        >
                                            <img
                                                :src="
                                                    prefixUrl +
                                                        item1.coverImageUrl
                                                "
                                                alt
                                            />
                                            <p v-text="item1.title"></p>
                                        </router-link>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="con43-on">
                            <router-link to="/zpzs">查看全部作品＞</router-link>
                        </div>
                    </div>
                </div>
            </div>
            <div class="con-2">
                <div class="pu-con">
                    <div class="con-tilte">
                        <p>MEMBERS SHOW</p>
                        <h1>会员之窗</h1>
                    </div>
                    <div class="con4-c">
                        <div class="con41">
                            <router-link
                                v-for="(item, index) in membeNavs"
                                :key="index"
                                :to="{ path: '/hyzc', query: { type: index } }"
                                >{{ item.title }}
                            </router-link>
                        </div>
                        <div class="con42">
                            <el-carousel
                                height="230px"
                                indicator-position="none"
                                @change="onHuiyuan"
                            >
                                <el-carousel-item
                                    v-for="(item, index) in membeLength"
                                    :key="index"
                                >
                                    <div style="display:flex">
                                        <router-link
                                            :to="{
                                                path: '/hyzc/dec',
                                                query: { id: item1.id },
                                            }"
                                            v-for="(item1,
                                            index1) in curMembeList"
                                            :key="index1"
                                        >
                                            <img
                                                :src="
                                                    prefixUrl +
                                                        item1.coverImageUrl
                                                "
                                                alt
                                            />
                                            <p v-text="item1.title"></p>
                                        </router-link>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="con43">
                            <router-link
                                :to="{ path: '/hyzc', query: { type: 0 } }"
                                >查看全部协会会员＞</router-link
                            >
                        </div>
                    </div>
                </div>
            </div>

            <div class="con-3">
                <div class="pu-con">
                    <div class="pc5">
                        <router-link to="/qyzz">
                            <img src="../../../assets/news/5.png" alt />
                        </router-link>
                        <router-link to="/grzz">
                            <img src="../../../assets/news/6.png" alt />
                        </router-link>
                        <router-link to="/jrxh">
                            <img src="../../../assets/news/7.png" alt />
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="con-2">
                <div class="pu-con">
                    <div class="con-tilte">
                        <p>ABOUT US</p>
                        <h1>关于协会</h1>
                    </div>
                    <div class="con4-c">
                        <div class="con61">
                            <router-link
                                :to="{
                                    path: '/jsgg/guanyuxh',
                                    query: { type: 1 },
                                }"
                                >协会章程</router-link
                            >
                            <router-link
                                :to="{
                                    path: '/jsgg/guanyuxh',
                                    query: { type: 2 },
                                }"
                                >组织架构</router-link
                            >
                            <router-link
                                :to="{
                                    path: '/jsgg/guanyuxh',
                                    query: { type: 4 },
                                }"
                                >自律规则</router-link
                            >
                            <router-link
                                :to="{
                                    path: '/jsgg/guanyuxh',
                                    query: { type: 5 },
                                }"
                                >地方协会</router-link
                            >
                            <router-link
                                :to="{
                                    path: '/jsgg/guanyuxh',
                                    query: { type: 3 },
                                }"
                                >办事机构</router-link
                            >
                        </div>
                    </div>
                </div>
                <div class="con62">
                    <div class="con621">
                        <div>
                            <span>
                                <p>
                                    本团体的名称是江苏省广告协会。英文译名：JiangSu
                                    Advertising Association，缩写：JSAA。
                                    性质：本团体是由江苏省（含在江苏省境内开展广告活动的）广告经营单位、广告发布单位、广告主及广告界相关教学科研管理单位、知名人士等自愿组成的行业性、非营利性社会组织。
                                    本团体的登记管理机关是江苏省民政厅。
                                    本团体与江苏省工商行政管理局脱钩后，依法独立运行，接受江苏省市场监督管理局等有关部门的政策和业务指导。
                                    本团体接受登记管理机关、行业管理部门和其他相关部门的监督管理。
                                </p>
                                <p>
                                    宗旨：宣传、维护中国共产党的政治引领，坚持正确的舆论导向，面向全省广告业界履行“提供服务、反映诉求、制定标准、规范行为”的基本职能，...
                                </p>
                            </span>
                            <router-link
                                :to="{
                                    path: '/jsgg/guanyuxh',
                                    query: { type: 0 },
                                }"
                            >
                                <p>view more</p>
                                <p></p>
                            </router-link>
                        </div>
                    </div>
                    <div class="con622">
                        <img src="../../../assets/news/8.png" alt />
                    </div>
                </div>
            </div>
        </div>
        <com-foot></com-foot>
    </div>
</template>

<script>
import jsscomHeard from "@/components/jsscom-heard";
import comFoot from "@/components/com-foot";
import moment from "moment";

export default {
    components: {
        jsscomHeard,
        comFoot,
    },
    filters: {
        pattime(value) {
            if (value) {
                return value.slice(0, 10);
            }
        },
        pattime1(value) {
            if (value) {
                const val = moment(value).format("YYYY-MM-DD");
                return val.slice(0, 11);
            }
        },
    },
    data() {
        return {
            type: "",
            prefixUrl: "",
            newsNavs: [],
            newsIndex: 0,
            newsList: [],
            membeNavs: ["副会长（常务）", "副会长", "常务理事", "理事", "会员"],
            membeIndex: 0,
            membeList: [],
            membeLength: 0,
            curMembeList: [],
            sssbList: [],
            imgList: [
                "../../../assets/news/n-1.jpg",
                "../../../assets/news/n-2.jpg",
                "../../../assets/news/n-3.jpg",
                "../../../assets/news/n-4.jpg",
            ],
            zuopvideoList: [],
            zuopvideoImgList: [],
            zuopmembeLength: 0,
        };
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl;
        //行业资讯
        this.getHyzxMenu();
        //会员之窗
        this.getHyzcMenu();
        //赛事申报
        this.getSsglMenu();

        //作品展示
        this.getZuoping();
    },
    mounted() {},
    methods: {
        onNewsTab(data, index) {
            this.newsIndex = index;
            this.getHyzxList(data);
        },
        onMembeTab(index) {
            this.membeIndex = index;
        },
        async getHyzxMenu() {
            const res = await this.$store.dispatch("news/getHyzxMenu");
            this.newsNavs = res;
            this.getHyzxList(res[0]);
        },
        async getHyzxList(param) {
            const data = {
                currentPage: 1,
                pageSize: 12,
                rootId: param.id,
            };
            const res = await this.$store.dispatch("news/getHyzxList", data);
            this.newsList = res.list;
        },
        // 会员之窗
        async getHyzcMenu() {
            const res = await this.$store.dispatch("news/getHyzcMenu");
            this.membeNavs = res;
            this.getHyzcList();
        },
        async getHyzcList() {
            var data = { currentPage: 1, pageSize: 50 };
            const res = await this.$store.dispatch("news/getHyzcList", data);
            this.membeList = res.list;
            this.membeLength = Math.ceil(this.membeList.length / 5);
            this.curMembeList = this.membeList.slice(0, 5);
        },
        onHuiyuan(ind, ond) {
            this.curMembeList = this.membeList.slice(ind * 5, (ind + 1) * 5);
        },
        //赛事申报
        async getSsglMenu() {
            const res = await this.$store.dispatch("news/getSsglMenu", {
                menuType: 1,
            });
            const res1 = await this.$store.dispatch("news/getSsglMenu", {
                menuType: 2,
            });
            console.log(res);
            console.log(res1);
            this.sssbList = [...res1, ...res];
        },
        //作品展示
        async getZuoping() {
            const res = await this.$store.dispatch("news/getZuoping", {});
            const res1 = await this.$store.dispatch("news/getZuopingImg", {});
            const { list } = res;
            this.zuopvideoList = list;
            this.zuopvideoImgList = res1.list;
            this.zuopmembeLength = Math.ceil(this.zuopvideoImgList.length / 5);
            console.log(this.zuopvideoImgList);
        },
    },
};
</script>

<style scoped>
@import "./home.css";
</style>
